<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="高德地图,DIY地图,高德地图生成器">
    <meta name="description" content="高德地图，DIY地图，自己制作地图，生成自己的高德地图">
    <title>高德地图 - DIY我的地图</title>
    <style>
        body { margin: 0; font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif"; min-height: 960px; min-width: 600px; }

        .my-map { margin: 0 auto; width: 1000px; height: 600px; }
        .amap-container{height: 100%;}
        .info-label{
            position: absolute;
            top: 15px;
            left: -42px;
            font-size: 12px;
            -webkit-transform:rotate(180deg)scale(0.6) ;
            transform: rotate(180deg)scale(0.6);
            color:blue;
            min-width: 100px;
            text-align: center
        }
        .name-label{
            position: absolute;
            top: 25px;
            left: -42px;
            font-size: 12px;
            -webkit-transform:rotate(180deg)scale(0.8) ;
            transform: rotate(180deg)scale(0.8);
            color:black;
            min-width: 100px;
            text-align: center
        }
        .consume-icon{
            width: 15px;
            height: 15px;
            top: 16px;
            left: 0px;
        }
        .translate90{
           transform: rotate(90deg)
         }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0; /*初始状态 透明度为0*/
            }
            50% {
                opacity: 1; /*中间状态 透明度为0*/
            }
            100% {
                opacity: 0; /*结尾状态 透明度为1*/
            }
        }
        .flash-label{
            -webkit-animation-name: fadeIn; /*动画名称*/
            -webkit-animation-duration: 1s; /*动画持续时间*/
            -webkit-animation-iteration-count: 3; /*动画次数*/
            -webkit-animation-delay: 0s; /*延迟时间*/
        }
    </style>
</head>
<body>
<div id="wrap" class="my-map">
    <div id="mapContainer"></div>
    <div id="icon-template" style="display: none">
        <div style="position: relative;top:16px;">
            <label class="name-label">fk1208</label>
            <label class="info-label">落地</label>
            <img src="icon/flights.svg" class="consume-icon">
            </div>
</div>
<script src="/dam/lib/jquery/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b&plugin=ElasticMarker"></script>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script>
    var myMap;
    var infoWindow, map, level = 15,

        center = {lng:  102.932148, lat: 25.104922},
        features = [];

    map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});

    new AMap.TileLayer.Satellite({map: map, zIndex: 1});

    map.on('complete', function(){
        map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
            map.addControl(new AMap.ToolBar);
            map.addControl(new AMap.OverView({isOpen: true}));
            map.addControl(new AMap.Scale);
        });

    })
    myMap =map;
    var template=$("#icon-template");
    function Marker(name,status,position){
        this.speed=300;
        this.marker =new AMap.Marker({autoRotation:true,map: myMap})
        this.content = template.children(0).clone();
        this.infoLabel=this.content.find(".info-label");
        this.consumeIcon=this.content.find(".consume-icon");
        this.nameLabel=this.content.find(".name-label");
        this.marker.setContent(this.content[0]);
        this.statusFlush =function(){
            this.infoLabel.removeClass("flash-label");
            this.infoLabel.addClass("flash-label");
        }
        this.setTransform =function(){
            this.consumeIcon.addClass("translate90")

        }
        this.setName = function (name) {
            this.nameLabel.html(name);
        }
        this.setStatus = function (status) {
            this.infoLabel.html(status);
        }
        this.setIcon=function (src) {
            this.consumeIcon.attr("src",src);
        }
        if(name){
            this.setName(name);
        }
        if(status){
            this.setStatus(status)
        }
        if(position){
            this.marker.setPosition(position);
        }
        var $this= this;
        var myMark = this;

        this.path = [];
        this.last = [];
        this.next = function () {
            var b;
            if($this.path.length>=1){
                b=$this.path.splice(0,1);
            }
            if(b[0].event){
                b[0].event()(function(){
                    $this.marker.moveTo(b[0], $this.speed);
                });
            }else{
                $this.marker.moveTo(b[0], $this.speed);
            }

        }
        this.remove =function () {
            myMap.remove(this.marker);
        }
        this.marker.on("moveend",function(o){
            if(myMark.path.length>=1){
                myMark.next();
            }
        });
         this.moveAlong = function (path) {
            var $this = this;
            var a= path.map(function (d,index) {
                return d;
            });
            this.path =a;
            if(this.path.length>=1);{
                this.last= this.path.splice(0,1);
                this.marker.moveTo(this.last[0], this.speed);
            }
        }
    }


//    var flight = new Marker();
//    flight.marker.setPosition(new AMap.LngLat( 102.939021,25.117269));
//    flight.setStatus("降落中");
//
//    var a= new Array();
//    a.push(new AMap.LngLat(102.938335,25.116725));
//    a.push(new AMap.LngLat(102.936918,25.115054));
//    a.push(new AMap.LngLat(102.935288,25.112917))
//    a.push(new AMap.LngLat(102.934644,25.11214))
//    a.push(new AMap.LngLat(102.934579,25.112256))
//    a.push(new AMap.LngLat(102.933506,25.110702))
//    a.push(new AMap.LngLat(102.932733,25.11008))
//    a.push(new AMap.LngLat(102.931017,25.108021))
//    a.push(new AMap.LngLat(102.930244,25.107127))
//    a.push(new AMap.LngLat(102.931446,25.105883))
//    a.push(new AMap.LngLat(102.932347,25.104601))
//    a.push(new AMap.LngLat(102.931231,25.103552))
//    a.push(new AMap.LngLat(102.931388,25.103474))
////    a.push(new AMap.LngLat(102.933571,25.103163))
////    a.push(new AMap.LngLat(102.936833,25.103552))
//
//    a[1].event = function () {
//        flight.setStatus("降落..")
//        flight.statusFlush();
//        return function (callback) {
//            callback();
//        }
//    }
//    a[2].event = function () {
//        flight.setStatus("落地成功")
//        flight.statusFlush();
//        return function (callback) {
//            setTimeout(function(){
//                callback();
//                flight.setStatus("跟随引导")
//                flight.statusFlush();
//            },15000);
//
//        }
//    }
//    a[12].event=function () {
//        flight.statusFlush();
//        flight.setStatus("开始下客")
//        return function (callback) {
//            setTimeout(function(){
//                callback();
//                flight.setStatus("下客结束")
//                flight.statusFlush();
//            },8000);
//
//        }
//    }
//    flight.moveAlong(a);



    var guideCar = new Marker("引导车020","待出发");
    guideCar.marker.setAngle(180)
    guideCar.setIcon("icon/carf.svg");
    guideCar.setTransform();
    guideCar.marker.setPosition(new AMap.LngLat(102.941553,25.106661))

    var guideCarPath= [];
    guideCarPath.push(new AMap.LngLat(102.940609,25.10635));
    guideCarPath.push(new AMap.LngLat(102.940223,25.106816));
    guideCarPath.push(new AMap.LngLat( 102.939064,25.10736));
    guideCarPath.push(new AMap.LngLat(102.938506,25.10771));
    guideCarPath.push(new AMap.LngLat(102.937476,25.10837));
    guideCarPath.push(new AMap.LngLat(102.936446,25.108992));
    guideCarPath.push(new AMap.LngLat(102.935373,25.109808));
    guideCarPath.push(new AMap.LngLat(102.934515,25.110313));
    guideCarPath.push(new AMap.LngLat(102.935588,25.111751));
    guideCarPath.push(new AMap.LngLat( 102.936275,25.112528));
    guideCarPath.push(new AMap.LngLat( 102.93606,25.112995));
    guideCarPath.push(new AMap.LngLat(102.935674,25.113228));
    guideCarPath.push(new AMap.LngLat(102.935073,25.1128));
    guideCarPath.push(new AMap.LngLat(102.933506,25.110702))//开始引导13
    guideCarPath.push(new AMap.LngLat(102.932733,25.11008))
    guideCarPath.push(new AMap.LngLat(102.931017,25.108021))
    guideCarPath.push(new AMap.LngLat(102.930244,25.107127))
    guideCarPath.push(new AMap.LngLat(102.931446,25.105883))
    guideCarPath.push(new AMap.LngLat(102.932347,25.104601))
    guideCarPath.push(new AMap.LngLat(102.931231,25.103552))//引导结束
    guideCarPath.push(new AMap.LngLat(102.93164,25.103241))
    guideCarPath.push(new AMap.LngLat(102.934,25.102191))
    guideCarPath.push(new AMap.LngLat(102.93576,25.103668))
    guideCarPath.push(new AMap.LngLat(102.940309,25.105223))
    guideCarPath.push(new AMap.LngLat(102.941897,25.106466))
//    guideCarPath.push(new AMap.LngLat(102.931446,25.105883))
//    guideCarPath.push(new AMap.LngLat(102.931446,25.105883))

    guideCarPath[1].event =function () {
        guideCar.setStatus("出发准备引导")
//        flight.statusFlush();
        return function (callback) {
            setTimeout(function(){
                callback();
            },3000);

        }
    }
    guideCarPath[13].event=function () {
        guideCar.setStatus("开始引导");
        guideCar.statusFlush();
        return function (callback) {
            setTimeout(function(){
                callback();
            },100);
        }
    }
    guideCarPath[20].event=function () {
        guideCar.setStatus("结束引导");
        guideCar.statusFlush();
        return function (callback) {
            setTimeout(function(){
                callback();
            },100);
        }
    }
    guideCarPath[23].event=function () {
        guideCar.setStatus("返回车库");
        guideCar.statusFlush();
        return function (callback) {
            setTimeout(function(){
                callback();
            },100);
        }
    }
    guideCarPath[24].event=function () {
        guideCar.statusFlush();
        setTimeout(function(){

            guideCar.marker.stopMove();
            guideCar.remove();
        },8000);
        return function (callback) {
            setTimeout(function(){
                callback();
            },100);
        }


    }
    guideCar.moveAlong(guideCarPath);
    var waterCar = new Marker("加水车","准备出发");

    waterCar.marker.setPosition(new AMap.LngLat(102.935931,25.110469));
    waterCar.setIcon("icon/carf.svg");
    waterCar.setTransform();
     var  waterCarPath = [];
    waterCarPath.push(new AMap.LngLat(102.93621,25.110469))
    waterCarPath.push(new AMap.LngLat(102.936489,25.109614))
    waterCarPath.push(new AMap.LngLat(102.937133,25.107885))
    waterCarPath.push(new AMap.LngLat(102.93827,25.104543))
    waterCarPath.push(new AMap.LngLat(102.938549,25.103493))
    waterCarPath.push(new AMap.LngLat(102.937584,25.103425))
    waterCarPath.push(new AMap.LngLat(102.935846,25.103493))
    waterCarPath.push(new AMap.LngLat(102.934687,25.106194))
    waterCarPath.push(new AMap.LngLat(102.935288,25.108681))
    waterCarPath.push(new AMap.LngLat(102.936296,25.110352))

    waterCarPath[6].event = function () {
        return function (callback) {
            waterCar.setStatus("加水中");
            setTimeout(function () {
               callback ();
                waterCar.setStatus("加水结束");
            },5000);
        }
    }
    waterCarPath[9].event = function () {
        return function (callback) {
            waterCar.setStatus("返回车库")
            setTimeout(function () {
                waterCar.remove();
            },5000);
            callback ();
        }
    }
    waterCar.moveAlong(waterCarPath);

    var oilCar = new Marker("加油车","准备出发");

    oilCar.marker.setPosition(new AMap.LngLat(102.93606,25.11043));
    oilCar.setIcon("icon/carf.svg");
    oilCar.setTransform();
    var oilCarPath=[];
    oilCarPath.push(new AMap.LngLat(102.936092,25.110479))
    oilCarPath.push(new AMap.LngLat(102.935856,25.109585))
    oilCarPath.push(new AMap.LngLat(102.934783,25.107719))
    oilCarPath.push(new AMap.LngLat(102.933603,25.105116))
    oilCarPath.push(new AMap.LngLat(102.93356,25.103192))
    oilCarPath.push(new AMap.LngLat(102.935727,25.102376))
    oilCarPath.push(new AMap.LngLat(102.937337,25.102415))
    oilCarPath.push(new AMap.LngLat(102.937283,25.103231))
    oilCarPath.push(new AMap.LngLat(102.937466,25.104649))
    oilCarPath.push(new AMap.LngLat(102.937251,25.10601))
    oilCarPath.push(new AMap.LngLat(102.937122,25.107914))
    oilCarPath.push(new AMap.LngLat(102.936736,25.109565))
    oilCarPath.push(new AMap.LngLat(102.9365,25.110226))
    oilCarPath[8].event = function () {
        return function (callback) {
            oilCar.setStatus("加油中")
            setTimeout(function () {
                callback ();
                oilCar.setStatus("加油结束")
            },5000);
        }
    }
    oilCarPath[12].event = function () {
        return function (callback) {
            oilCar.setStatus("返回车库")
            setTimeout(function () {
                oilCar.remove();
            },5000);
            callback ();
        }
    }
     oilCar.moveAlong(oilCarPath);

    var cleanCar = new Marker("清洁车","准备出发");

    cleanCar.marker.setPosition(new AMap.LngLat(102.936124,25.110702));
    cleanCar.setIcon("icon/carf.svg");
    cleanCar.setTransform();
    var cleanCarPath = [];
    cleanCarPath.push(new AMap.LngLat(102.935416,25.109653))
    cleanCarPath.push(new AMap.LngLat(102.935309,25.108254))
    cleanCarPath.push(new AMap.LngLat(102.933979,25.106583))
    cleanCarPath.push(new AMap.LngLat(102.93355,25.105028))
    cleanCarPath.push(new AMap.LngLat(102.934386,25.103571))
    cleanCarPath.push(new AMap.LngLat(102.937433,25.104426))
    cleanCarPath.push(new AMap.LngLat(102.936854,25.103309))
    cleanCarPath.push(new AMap.LngLat(102.937412,25.106078))
    cleanCarPath.push(new AMap.LngLat(102.93694,25.108137))
    cleanCarPath.push(new AMap.LngLat(102.936682,25.109556))

    cleanCarPath[7].event=function(){
        return function (callback) {
            cleanCar.setStatus("清洁中");
            setTimeout(function () {
                callback();
                cleanCar.setStatus("清洁结束");
            },5000);
        }
    }
    cleanCarPath[9].event=function(){
        return function (callback) {
            cleanCar.setStatus("返回车库");
            setTimeout(function () {
                callback();
                cleanCar.setStatus("返回车库");
            },100);
            setTimeout(function () {
                cleanCar.remove();
            },5000);
        }
    }
    cleanCar.moveAlong(cleanCarPath);
//
//     var flight2 = new Marker("NBJH95","机务检测");
//     flight2.marker.setPosition(new AMap.LngLat(102.937305,25.102114));
//     flight2Path=[];
//     flight2Path.push(new AMap.LngLat(102.938378,25.102502))
//     flight2Path.push(new AMap.LngLat(102.93812,25.103474))
//     flight2Path.push(new AMap.LngLat(102.937133,25.103474))
//     flight2Path.push(new AMap.LngLat(102.936275,25.103241))
//     flight2Path.push(new AMap.LngLat(102.93576,25.102114))
//     flight2Path.push(new AMap.LngLat(102.937648,25.100287))
//     flight2Path.push(new AMap.LngLat(102.93988,25.099937))
//     flight2Path.push(new AMap.LngLat(102.944343,25.10394))
//     flight2Path.push(new AMap.LngLat(102.947862,25.107399))
//     flight2Path.push(new AMap.LngLat(102.951724,25.111596))
//     flight2Path.push(new AMap.LngLat(102.953913,25.114277))
//     flight2Path.push(new AMap.LngLat(102.956831,25.117191))
//     flight2Path[3].event=function(){
//         flight2.setStatus("等待维护");
//         return function (callback) {
//            setTimeout(function () {
//                callback();
//                flight2.setStatus("维护中");
//            },20000);
//         }
//     }
//    flight2Path[5].event=function () {
//        flight2.setStatus("维护结束");
//        return function (callback) {
//            setTimeout(function () {
//                callback();
//                flight2.setStatus("上跑道");
//            },2000);
//        }
//    }
//
//    flight2.moveAlong(flight2Path);

    //            var meshLine =new AMap.Polyline({
//                path:a,
//                map: myMap
//            });
    myMap.on("click",function(po){console.log("push(new AMap.LngLat("+po.lnglat.lng+","+po.lnglat.lat+"))")})



</script>
</body>


</html>